<template>
	<view>

		<!-- 医生信息 -->
		<view class="doc_card">
			<!-- 头像 -->
			<image :src="doctor.image ?doctor.image:'../../static/img/user.png'" mode=""></image>
			<!-- 信息 -->
			<view class="doc_card_right">
				<!-- 医生名称 -->
				<view class="doc_card_right_v">
					<text class="name">{{ doctor.name }}</text>
					<text class="major">{{ doctor.professionalTitle + '·'+doctor.department }}</text>
				</view>
				<!-- 医院 -->
				<view class="doc_card_right_v">
					<u-tag v-if="doctor.level" size="mini" :text="doctor.level" plain shape="square" color="#FFFFFF" bgColor="#00B4C7"
						border-color="#00B4C7"></u-tag>
					<text class="hospital">{{doctor.hospital}}</text>
				</view>
			</view>
		</view>
		<!-- 预约信息 -->
		<view>
			<view class="input_card">
				<view class="input-u" @click="showTimePopup=true">
					<text class="input-u-t">上门时间</text>
					<u-input v-model="appointmentTime" placeholder="请选择时间"
						placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false"
						disabled="true"/>
					<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				</view>
				<view class="input-u" @click="toPage(`/pagesA/address/address?type=1`)">
					<text class="input-u-t">服务地点</text>
					<u-input v-model="orderInfo.address" placeholder="请选择地址"
						placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false"
						disabled="true" />
					<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				</view>
				<view class="input-u">
					<text class="input-u-t">预约人</text>
					<u-input v-model="orderInfo.contactName" placeholder="请填写姓名"
						placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false" />
				</view>
				<view class="input-u">
					<text class="input-u-t">联系方式</text>
					<u-input v-model="orderInfo.contactPhone" type="number" placeholder="请填写联系方式" maxlength="11"
						placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false" />
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<u-button class="" @click="handelSubmit" :disabled="inputValue==''?true:false" shape="square"
			:custom-style="uButCustomStyle">确认预约</u-button>

		<!-- 上门时间弹出层 -->
		<u-popup :show="showTimePopup" @close="showTimePopup=false" closeable>
			<view class="popup">
				<view class="title">预约时间</view>
				<!-- 预约时间 -->
				<view>
					<times ref="times"></times>
				</view>
				<u-button class="" @click="submitTime" :disabled="inputValue==''?true:false" shape="square"
					:custom-style="uButComfirmStyle">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		addOrderApi
	} from '../../common/API/orderApi.js'
	import { times } from '../components/times.vue'
	export default {
		components: {
			times
		},
	
		data() {
			return {
				uInputCustomStyle: {
					backgroundColor: "#FFFFFF",
				},
				uButCustomStyle: {
					color: "#FFFFFF",
					width: "686rpx",
					height: "80rpx",
					borderRadius: "44rpx",
					backgroundColor: "#00B4C7",
					fontSize: "34rpx",
					fontStyle: "normal",
					borderStyle: "hidden !important"
				},
				uButComfirmStyle: {
					color: "#FFFFFF",
					width: "90%",
					height: "80rpx",
					borderRadius: "44rpx",
					backgroundColor: "#00B4C7",
					marginTop: "40rpx",
					fontSize: "30rpx",
					fontStyle: "normal",
					borderStyle: "hidden !important"
				},
				orderInfo: {
					appointmentTime: "",
					segment: "",
					address: "",
					contactName: "",
					contactPhone: "",
					orderType: 13, // 预约类型
					source: 1, // 订单来源 1小程序
					acceptCode: '', // 医生code
					acceptName: '' // 医生姓名
				},
				showTimePopup: false,
				doctor: {},
				appointmentTime: '', 
				type: ''
			}
		},
		methods: {
			// 预约时间确认按钮
			submitTime(){
				this.showTimePopup = false
				let data = this.$refs.times
				this.orderInfo.appointmentTime = data.selectDate
				this.orderInfo.segment = data.selectTab
				this.appointmentTime = data.selectDate.split(' ')[0] + '-' + data.selectTab
				// console.log(this.orderInfo)
			},
			// 选择地址
			getValue(type, addressObj) {
				this.type = type
				this.orderInfo.address = JSON.parse(addressObj)
			},
			async handelSubmit() {
				if(!this.appointmentTime) {
					return uni.$showMsg('预约时间不能为空')
				}
				if(!this.orderInfo.address) {
					return uni.$showMsg('预约地址不能为空')
				}
				if(!this.orderInfo.contactName) {
					return uni.$showMsg('预约人不能为空')
				}
				if(!this.orderInfo.contactPhone) {
					return uni.$showMsg('手机号不能为空')
				}
				// 验证手机号
				if(this.orderInfo.contactPhone && !uni.$u.test.mobile(this.orderInfo.contactPhone)) {
					return uni.$showMsg('手机号码不正确')
				}
				this.orderInfo.status = 0
				let res = await addOrderApi(1, this.orderInfo)
				// console.log('添加订单结果', res)
				if (res.status == 200) {
					uni.showToast({
						title: "预约成功！"
					}, 800)
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)
				}
			}
		},
		onLoad(options) {
			console.log(options.userInfo)
			this.doctor = JSON.parse(options.userInfo)
			this.orderInfo.acceptCode = this.doctor.memberCode
			this.orderInfo.acceptName = this.doctor.name
			if(options.type) {
				this.getValue()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doc_card {
		// width: 686rpx;
		height: 110rpx;
		margin: 16rpx 32rpx 16rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;

		image {
			width: 112rpx;
			height: 112rpx;
			border: 2rpx solid #00B4C7;
			border-radius: 100rpx;
		}

		.doc_card_right {
			width: 480rpx;

			.doc_card_right_v {
				display: flex;
				justify-content: space-between;
				margin: 0rpx 0 16rpx 0;

				.name {
					font-weight: 500;
					font-size: 34rpx;
				}

				.major {
					margin-right: 150rpx;
					font-weight: 400;
					font-size: 28rpx;
					font-family: PingFangSC;
					padding-top: 5rpx;
				}

				.hospital {
					margin-right: 50rpx;
					font-weight: 400;
					font-size: 28rpx;
					font-family: PingFangSC;
					padding-top: 5rpx;
				}

			}

			.slot-content {
				color: #999;
				font-size: 28rpx;
			}
		}

	}

	.input-u-t {
		font-size: 28rpx;
		width: 150rpx;
	}

	.input-u {
		height: 100rpx;
		/* padding-right: 160rpx; */
		display: flex;
		justify-content: left;
		align-items: center;
		width: 90%;
		margin-left: 32rpx;
		font-size: 28rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.input_card {
		background-color: #FFFFFF;
		height: 450rpx;
		width: 686rpx;
		margin: 32rpx;
		border-radius: 16rpx;
	}
	.popup{
		padding: 20rpx;
		height: 500rpx;
		.title{
			margin: 20rpx 0 30rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.confirmBtn{
			position: absolute;
			bottom: 50rpx;
			background: #00B4C7;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>